<% if (page.hero) { %>
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-b from-indigo-100 to-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
            <div class="relative z-10 lg:w-full lg:max-w-2xl">
                <div class="relative">
                    <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
                        <%= page.hero.title %>
                    </h1>
                    <p class="mt-6 text-xl text-gray-500 max-w-3xl">
                        <%= page.hero.description %>
                    </p>
                    <div class="mt-10 flex flex-col sm:flex-row gap-4">
                        <% if (page.hero.primaryCta) { %>
                            <a href="<%= page.hero.primaryCta.url %>"
                               class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-200">
                                <%= page.hero.primaryCta.text %>
                            </a>
                        <% } %>
                        <% if (page.hero.secondaryCta) { %>
                            <a href="<%= page.hero.secondaryCta.url %>"
                               class="inline-flex items-center px-6 py-3 border-2 border-indigo-600 text-base font-medium rounded-full text-indigo-600 bg-transparent hover:bg-indigo-50 transition-colors duration-200">
                                <%= page.hero.secondaryCta.text %>
                            </a>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute right-0 top-0 -mt-32 transform translate-x-1/2">
            <div class="h-96 w-96 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full filter blur-3xl opacity-30"></div>
        </div>
    </section>
<% } %>

<% if (page.features) { %>
    <!-- Features Section -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <p class="text-base font-semibold tracking-wide text-indigo-600 uppercase"><%= page.features.subtitle %></p>
                <h2 class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"><%= page.features.title %></h2>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"><%= page.features.description %></p>
            </div>

            <div class="mt-20">
                <div class="grid grid-cols-1 gap-12 lg:grid-cols-3 lg:gap-8">
                    <% page.features.items.forEach(function(feature) { %>
                        <div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-50 group-hover:bg-indigo-100 transition-colors duration-300">
                                <%- feature.icon %>
                            </div>
                            <div class="mt-8">
                                <h3 class="text-lg font-medium text-gray-900 group-hover:text-indigo-600 transition-colors duration-300">
                                    <%= feature.title %>
                                </h3>
                                <p class="mt-2 text-base text-gray-500">
                                    <%= feature.description %>
                                </p>
                            </div>
                        </div>
                    <% }); %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (page.stats) { %>
    <!-- Stats Section -->
    <section class="bg-gradient-to-r from-indigo-800 to-indigo-900 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl"><%= page.stats.title %></h2>
                <p class="mt-3 max-w-2xl mx-auto text-xl text-indigo-100"><%= page.stats.description %></p>
            </div>
            <div class="mt-10 grid grid-cols-2 gap-6 sm:grid-cols-4">
                <% page.stats.items.forEach(function(stat) { %>
                    <div class="p-6 bg-white bg-opacity-10 rounded-2xl backdrop-blur-lg">
                        <dt class="text-base font-medium text-indigo-100"><%= stat.label %></dt>
                        <dd class="mt-2 text-4xl font-extrabold text-white"><%= stat.value %></dd>
                    </div>
                <% }); %>
            </div>
        </div>
    </section>
<% } %>

<% if (page.cta) { %>
    <!-- CTA Section -->
    <section class="relative bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="bg-indigo-600 rounded-3xl shadow-xl overflow-hidden">
                <div class="px-6 py-12 sm:px-12 sm:py-16 lg:flex lg:items-center lg:justify-between">
                    <div>
                        <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                            <span class="block"><%= page.cta.title %></span>
                        </h2>
                        <p class="mt-4 text-lg text-indigo-100 max-w-3xl">
                            <%= page.cta.description %>
                        </p>
                    </div>
                    <div class="mt-8 lg:mt-0 lg:ml-8">
                        <a href="<%= page.cta.button.url %>"
                           class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-indigo-600 bg-white hover:bg-indigo-50 transition-colors duration-200">
                            <%= page.cta.button.text %>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
<% } %>